﻿@{
    ViewBag.Title = "HouseIndex";
    Layout = "~/Views/Shared/_LayoutIndex.cshtml";
}
<div class="ui-layout" id="layout" style="height: 100%; width: 100%;">
    <div class="ui-layout-west">
        <div class="west-Panel" style="height: 98%;">
            <div class="tool-panel">
                <p class="clearfix">
                    <span class="tool-selected-text fl"></span>
                    <i class="fa fa-filter fa-lg fr" aria-hidden="true"></i>
                </p>
                <ul class="tool-lists">

                    <ul>
            </div>

            <div id="itemTree_area" class="tree_item"></div>
        </div>
    </div>
    <div class="ui-layout-center">
        <div class="center-Panel">
            <div class="titlePanel">
                <div class="title-search">
                    <table>
                        <tr>
                            <td style="padding-right:8px;">经营类型:</td>
                            <td>
                                <div id="queryCondition" class="btn-group">
                                    <div id="BussinessScope" type="select" class="ui-select" style="width: 100px;"></div>
                                </div>
                            </td>
                            <td style="padding:0px 8px 0px 15px;">项目状态:</td>
                            <td style="padding-right:15px;">
                                <div id="PropertyState" type="select" class="ui-select" style="width: 100px;"></div>
                            </td>
                            <td>
                                <input id="txt_Keyword" type="text" maxlength="20" class="form-control" placeholder="请输入要查询的项目名称" style="width: 200px;" />
                            </td>
                            <td style="padding-left:5px;">
                                <a id="btn_Search" class="btn btn-primary"><i class="fa fa-search"></i>&nbsp;查询</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="toolbar">
                    <div class="btn-group">
                        <a id="lr-replace" class="btn btn-default" onclick="reload();"><i class="fa fa-refresh"></i>&nbsp;刷新</a>
                        <a id="lr-add" class="btn btn-default" onclick="btn_add()"><i class="fa fa-plus"></i>&nbsp;新增</a>
                        <a id="lr-edit" class="btn btn-default" onclick="btn_edit()"><i class="fa fa-pencil-square-o"></i>&nbsp;编辑</a>
                        <a id="lr-delete" class="btn btn-default" onclick="btn_delete()"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
                        <a id="lr-map" disabled="disabled" class="btn btn-default"><i class="fa fa-map-marker"></i>&nbsp;地图</a>
                    </div>
                </div>

            </div>
            <div class="gridPanel">
                <table id="gridTable"></table>
                <div id="gridPager" style="position:relative;">
                    <p class="total_area_num">
                        <span>数量:<span class="total_num"></span></span>
                        <span>建筑面积:<span class="total_area"></span></span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var scoped_tool_id,
        _organieId = "",//所选机构id
        _region = "",//所选区域id
        _bussinessScope = "",//经营类型
        _propertyState = "";//项目状态

    $(function () {
        InitialPage();
        toolClickId();
        getToolLists();
        toolClickFunc();
        // getArea_num();
        GetGrid();
    });
    //初始化页面
    function InitialPage() {
        //layout布局
        $('#layout').layout({
            applyDemoStyles: true,
            onresize: function () {
                $(window).resize()
            }
        });
        //resize重设(表格、树形)宽高
        $(window).resize(function (e) {
            window.setTimeout(function () {
                $('#gridTable').setGridWidth($('.gridPanel').width());
                $("#gridTable").setGridHeight($(window).height() - 249.5);
                $("#itemTree").setTreeHeight($(window).height() - 31.5);
            }, 200);
            e.stopPropagation();
        });
        //经营类型
        $("#BussinessScope").ComboBox({
            url: "../../SystemManage/DataItemDetail/GetDataItemTreeJson",
            param: { EnCode: "BussinessScope" },
            id: "value",
            text: "text",
            height: "200px"
        }).bind("change", function () {
            _bussinessScope = parseInt($("#BussinessScope").attr("data-value"));
            $("#btn_Search").trigger("click");
        });
        // $("#BussinessScope").ComboBoxSetValue(_bussinessScope);
        //项目状态
        $("#PropertyState").ComboBox({
            url: "../../SystemManage/DataItemDetail/GetDataItemTreeJson",
            param: { EnCode: "PropertyState" },
            id: "value",
            text: "text",
            height: "200px"
        }).bind("change", function () {
            _propertyState = parseInt($("#PropertyState").attr("data-value"));
            $("#btn_Search").trigger("click");
        });
        // $("#PropertyState").ComboBoxSetValue(_propertyState);
    }
    //获取工具栏数据
    function getToolLists() {
        // $.ajax({
        //     url:'../../SystemManage/DataItemDetail/GetDataItemTreeJson',
        //     type:'get',
        //     dataType:'json',
        //     success: function(data){
        //         if(data){
        //             var _html ="";
        //             for(var i=0;i<data.length;i++){
        //                 _html+='<li id="'+(i+1)+'">'+data[i].text+'</li>';
        //             }
        //             $(".tool-lists").html(_html);
        //             $(".tool-selected-text").text(data[0].text);
        //             $("ul.tool-lists li").eq(0).addClass('active');
        //             //默认执行一次
        //             scoped_tool_id = 1;
        //             GetTree(1);
        //         }
        //     },
        //     error:function(error){
        //         console.log(error)
        //     }
        // })
        var toolJson = [{ "name": "区域", "id": "1" }, { "name": "机构", "id": "2" }]
        var _html = "";
        for (var i = 0; i < toolJson.length; i++) {
            _html += '<li id="' + (i + 1) + '">' + toolJson[i].name + '</li>'
        }
        $(".tool-lists").html(_html);
        $("ul.tool-lists li").eq(0).addClass('active');
        $(".tool-selected-text").text("区域");
        //默认执行一次
        scoped_tool_id = 1;
        GetTree(1); 
       
    }
    //点击工具
    function toolClickFunc() {
        $(".tool-panel p i").click(function () {
            event.stopPropagation();
            if ($(".tool-lists").is(":hidden")) {
                $(".tool-lists").fadeIn()
            } else {
                $(".tool-lists").fadeOut()
            }
        });
    }
    //点击切换工具栏
    function toolClickId() {
        $(document).on('click', '.tool-lists li', function () {
            event.stopPropagation();
            var tool_id = $(this).attr('id');
            $(this).addClass("active").siblings().removeClass('active');
            $(".tool-selected-text").text($(this).text());
            $(".tool-lists").fadeOut();
            if (scoped_tool_id != tool_id) {
                GetTree(tool_id)
                scoped_tool_id = tool_id; 
            }
        })
        $(document).click(function () {
            $(".tool-lists").fadeOut()
        })
    }
    function GetTree(id) {
        var queryJson = {
            Type: id,
            AreaId: "310100",
            Id: "",
            IsSubstep: false
        };
        var item = {
            height: $(window).height() - 55.5,
            url: "../../ResourceManage/RS_PStructs/GetPropertyQueryTreeJson",
            method: "POST",
            param: { queryJson: JSON.stringify(queryJson) },
            onnodeclick: function (item) {
                if (id == 1) {
                    _organieId = "";
                    _region = item.value;
                } else if (id == 2) {
                    _region = "";//所选区域id
                    _organieId = item.value;
                }
                $('#btn_Search').trigger("click");
            }
        };
        $("#itemTree_area").treeview(item);
        _organieId = "";
        _region = "";
        $('#btn_Search').trigger("click");
    }
   
    //加载表格
    function GetGrid() {
        var ProjectCategory;
        $.SetForm({
            url: "../../SystemManage/DataItemDetail/GetDataItemListJson",
            param: { EnCode: "PropertyType" },
            success: function (data) {  ProjectCategory = data;   }
        }); 
        var selectedRowIndex = 0;
        var queryJson = $("#queryCondition").GetWebControls();
        $gridTable = $("#gridTable");
        queryJson["OrganizeId"] = _organieId;
        queryJson["Region"] = _region;
        queryJson["BussinessScope"] = _bussinessScope;
        queryJson["PropertyState"] = _propertyState;
        queryJson["KeyWord"] = $("#txt_Keyword").val();
        $gridTable.jqGrid({
            url: "../../ResourceManage/RS_PStructs/GetPropertyPageList",
            postData: { queryJson: JSON.stringify(queryJson) },
            datatype: "json",
            height: $(window).height() - 141.5,
            autowidth: true,
            mtype: 'POST',
            colModel: [
                { label: "主键", name: 'id', hidden: true },
                { label: "项目名称", name: "Name", width: 250, align: "left", sortable: false },
                { label: "项目编号", name: "Code", width: 200, align: "left", sortable: false },
                { label: "区域", name: "Region", width: 150, align: "left", sortable: false },
                { label: "地址", name: "Address", width: 200, align: "left", sortable: false },
                {
                    label: "项目类型", name: "ProjectCategory", width: 150, align: "left", sortable: false,
                    formatter: function (cellvalue, options, rowObject) {
                        var Name = "";
                        $(ProjectCategory).each(function (index, data) { 
                            if (data.ItemDetailId == cellvalue) {
                                Name = data.ItemName;
                                return;
                            }
                        });
                        return Name;
                    }
                },
                { label: "组织机构", name: "OrganizeId", width: 200, align: "left", sortable: false },
                { label: "面积", name: "Area", width: 150, align: "left", sortable: false },
                { label: "房间数", name: "Count", width: 100, align: "left", sortable: false },
                { label: "描述", name: "Memo", width: 200, align: "left", sortable: false }
            ],
            viewrecords: false,
            rowNum: 30,
            rowList: [30, 50, 100],
            pager: "#gridPager",
            sortname: 'Address',
            sortorder: 'desc',
            rownumbers: false,
            gridview: true, 
            onSelectRow: function (status) {
                selectedRowIndex = $("#" + this.id).getGridParam('selrow');
            },
            gridComplete: function () {
                $("#" + this.id).setSelection(selectedRowIndex, false);
                var re_page = JSON.parse($gridTable.getGridParam('costtime'));//获取返回的当前页
                $(".total_num").text(re_page.records)
                if (!re_page.conditionJson) {
                    $(".total_area").text("0")
                }
                $(".total_area").text(re_page.conditionJson)
            },

        });
        //查询事件
        $("#btn_Search").click(function () { 
            var queryJson = $("#queryCondition").GetWebControls();
            queryJson["OrganizeId"] = _organieId;
            queryJson["Region"] = _region;
            queryJson["BussinessScope"] = _bussinessScope;
            queryJson["PropertyState"] = _propertyState;
            queryJson["KeyWord"] = $("#txt_Keyword").val();
            $gridTable.jqGrid('setGridParam', {
                postData: {
                    queryJson: JSON.stringify(queryJson)
                },
                page: 1
            }).trigger('reloadGrid');
        });
        //查询回车事件
        $('#txt_Keyword').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                $('#btn_Search').trigger("click");
            }
        });
    }
    //查询函数
    function searchGrid(queryJson) {
        $("#gridTable").jqGrid('setGridParam', {
            url: "../../AuthorizeManage/ModuleForm/GetPageListJson",
            postData: { queryJson: JSON.stringify(queryJson) },
        }).trigger('reloadGrid');
    }

</script>

<style>
    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .clearfix:after {
        content: "";
        display: block;
        font-size: 0;
        height: 0;
        visible: hidden;
        clear: both;
    }

    .tool-panel {
        position: relative;
        padding: 4px 17px 4px 8px;
        width: 100%;
        border-bottom: 1px solid #ddd;
    }

        .tool-panel p {
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

            .tool-panel p span {
                height: 100%;
                font-size: 14px;
            }

            .tool-panel p i {
                cursor: pointer;
                margin-top: 10px;
            }

        .tool-panel ul {
            display: none;
            position: absolute;
            width: 100px;
            top: 46px;
            right: 7px;
            border-radius: 3px;
            border: 1px solid #ddd;
            background: #fafafa;
        }

            .tool-panel ul li {
                height: 30px;
                line-height: 30px;
                cursor: pointer;
                color: #666;
                text-align: center;
                font-size: 14px;
                border-bottom: 1px solid #ddd;
            }

                .tool-panel ul li:last-child {
                    border: none;
                }

                .tool-panel ul li.active, .tool-panel ul li:hover {
                    background: #0da697;
                    color: #fff;
                }

                .tool-panel ul li:hover {
                    background: #1e6b63;
                }

            .tool-panel ul:after {
                content: "";
                display: block;
                position: absolute;
                top: -8px;
                right: 10px;
                width: 0;
                height: 0;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
                border-bottom: 8px solid #eee;
            }

    .total_area_num {
        right: 20px;
        bottom: 4px;
        position: absolute;
        margin-right: 40px;
        background: #fff;
        padding: 2px 3px;
    }

        .total_area_num span {
            display: inline-block;
        }

        .total_area_num > span {
            margin-right: 15px;
            font-size: 14px;
            color: #000;
        }
</style>
